<!DOCTYPE html>
<html>
    <head>
    <title>

    </title>
    <style>

    </style>
    <script src="../js/vue.js">
    </script>
</head>

<body>
    <div id="app">
        <!--<zujian></zujian>-->
        <!--<zj></zj>-->
        1234如789
        <button>我明明写了这个button，怎么就是不显示</button>
    </div>
    <div id="app2">
        <zujian></zujian>
        <button>这是写在组件外的button</button>
    </div>
    <div id="app3">
        <zj></zj>
    </div>
    <div id="app4">
        <kl></kl>
        <kl></kl>
        <kl></kl>
    </div>
</body>
<script>

//    model层
//    通过extend方式定义一个Vue组件
    var MyCompenent = Vue.extend({
        template:'<div>A custom component!</div>'
    })

//    向Vue注册这个组件，名称定义为my-decodeURIComponent
//    Vue.component('zujian', MyCompenent); 不注册
//    Vue.component('zj', Zujian); 不注册
//    创建根实例
    new MyCompenent({
        el:'#app'
    })

    var Zj=Vue.extend({
        template:'<button>这是bjm写的button</button>'
    })

    Vue.component('zujian', Zj)

    var vm2=new Vue({
        el:'#app2'
    })

/*局部注册*/
    var Child={
        template:'<span style="display: block;backgound:cyan; color: deeppink; size:20px; border:1px solid yellow;">局部注册组件出现的span</span>'
    }
    var vm3=new Vue({
        el:'#app3',
        components:{
            'zj':Child
        }
    })
/*data必须是函数*/
    var data={counter:0}
    var Chlid2={
        template:'<button v-on:click="counter +=1">{{counter}}</button>',
        data:function () {
            return {
                counter:0
            }
        }
    }
    Vue.component('kl', Chlid2)
    var vm4=new Vue({
        el:'#app4'
    })
</script>
</html>
